<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试vue解析数据</title>
    <script src="D:\ApplicationFiles\vscode\chapter_three\VUE框架\vue\vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{str}}</h1>
        <h1>{{person.name}} {{person.age}} {{person.coding()}}</h1>
        <h1>{{users[1].address}} {{users[0].age}}</h1>
        <h1>{{show()}}</h1>
    </div>
    <script>
        new Vue({
            el: "#app", //id选择器
            data() {
                return {
                    str: 'vue',
                    person: { //对象
                        name: 'jack',
                        age: 20,
                        coding() { //简写的函数
                            alert(this.name + this.age)
                        }
                    },
                    users: [ //数组
                        {
                            name: 'tony',
                            age: 10,
                            address: '西安'
                        },
                        {
                            name: 'jerry',
                            age: 20,
                            address: '广州'
                        }
                    ]
                }
            },
            methods: {
                show() {
                    alert('show()调用成功!');
                }
            }
        })
    </script>
</body>

</html>